<template>
  <div class="tops-1 topt-1">
    <div class="t-1 t2-s">
      <el-input v-model="input" placeholder="流程名称" class="inpt-1" />
      <el-input v-model="input" placeholder="流程类型" class="inpt-1" />
      <el-input v-model="input" placeholder="申请人" class="inpt-1" />
      <el-input v-model="input" placeholder="流程部门" class="inpt-1" />
    </div>
    <div class="t-1">
      <el-date-picker
        v-model="value1"
        type="date"
        placeholder="申请开始时间"
        :size="size"
      />

      <div class="s-1">
        <el-date-picker
          v-model="value1"
          type="date"
          placeholder="申请结束时间"
          :size="size"
        />
      </div>

      <el-date-picker
        v-model="value1"
        type="date"
        placeholder="处理开始时间"
        :size="size"
      />
      <div class="s-1">
        <el-date-picker
          v-model="value1"
          type="date"
          placeholder="处理结束时间"
          :size="size"
        />
      </div>

      <el-button type="primary" class="bot-1">搜索</el-button>
    </div>
  </div>
  <div class="middle z-1">
    <el-tabs type="border-card">
      <el-tab-pane label="我的任务"><arTicleS></arTicleS></el-tab-pane>
      <el-tab-pane label="我的申请">Config</el-tab-pane>
      <el-tab-pane label="我的提醒">Role</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
const size = ref<'default' | 'large' | 'small'>('default')

const value1 = ref('')
const input = ref('')
</script>

<style lang="scss" scoped>
.topt-1 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.inpt-1 {
  width: 219px;
  margin: 0 3px;
}
.tex-1 {
  margin: 0 5px;
}
.s-1 {
  margin: 0 5px;
}
.bot-1 {
  margin: 0 2px;
}
.t-1 {
  display: flex;
  align-items: center;
  justify-content: center;
}
.t2-s {
  margin-left: -70px;
  margin-bottom: 5px;
}
</style>
